<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/kuding.css">
  <meta name="description" content="">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">
  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">

</head>

<body>
  <div class="AllDiv">
  <!---顶部菜单栏（固定位置和高度：100px）--->
  <div class="TopNavigation">
    <div id="toplogo">XianCai</div>
<!--    <div id="topss">搜索</div>-->
    <div class="search-container">
      <!-- 搜索框区域 -->
      <div class="search-box">
        <input type="text" id="search-input" placeholder="搜索你想要的宝贝...">
        <button id="search-btn">搜索</button>
      </div>

      <!-- 搜索下拉面板（默认隐藏，点击搜索框显示） -->
      <div class="search-dropdown" id="search-dropdown">
        <!-- 历史搜索 -->
        <div class="dropdown-section">
          <h3 class="section-title">历史搜索</h3>
          <ul class="history-list" id="history-list">
            <li class="history-item" onclick="goToResult('二手笔记本电脑')">二手笔记本电脑</li>
            <li class="history-item" onclick="goToResult('闲置连衣裙')">闲置连衣裙</li>
            <li class="history-item" onclick="goToResult('家用咖啡机')">家用咖啡机</li>
            <li class="history-item" onclick="goToResult('考研真题')">考研真题</li>
          </ul>
        </div>

        <!-- 推荐搜索 -->
        <div class="dropdown-section">
          <h3 class="section-title">大家都在搜</h3>
          <ul class="recommend-list" id="recommend-list">
            <li class="recommend-item" onclick="goToResult('二手手机')">二手手机</li>
            <li class="recommend-item" onclick="goToResult('露营装备')">露营装备</li>
            <li class="recommend-item" onclick="goToResult('儿童绘本')">儿童绘本</li>
            <li class="recommend-item" onclick="goToResult('厨房小家电')">厨房小家电</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 搜索结果页面（默认隐藏） -->
    <div class="result-page" id="result-page" style="display: none;">
      <div class="back-btn" onclick="goBack()">← 返回搜索</div>
      <h2 class="result-title" id="result-title">搜索结果：</h2>
      <p class="result-tip">点击历史/推荐项后，此处会显示对应关键词的搜索结果（实际项目中需对接后端接口）</p >
    </div>
  </div>

  <!---内容区外壳（自适应铺满高度）--->
  <div class="BodyContentSurface">
    <!---内容区--->
    <div class="BodyContent">
      <!---左侧导航栏（固定位置和宽度：200px）--->
      <div class="LeftNavigationSurface">
        <div class="left1">
          <!--          LeftNavigationSurface-->
          <a href="index.html"><div class="left-bq">首页</div></a>
        </div>
        <div class="left">
          <!--          LeftNavigationSurface-->
          <a href="index2.html"><div class="left-bq">消息</div></a>
        </div>
        <div class="left">
          <!--          LeftNavigationSurface-->
          <a href="index3.html"><div class="left-bq">个人</div></a>
        </div>

      </div>
      <!---右侧内容区（自适应铺满宽度）--->
      <div class="RightContentSurface">
        <!---右侧内容区--->
        <div class="RightContent">

          <div class="content">
            <!---右侧内容区--->
            <div class="RightContent">
              二手电子产品交易区
              <!-- 二手电子产品内容框架（2行4列横排） -->
              <div class="content">
                <!-- 1. 标题与功能操作区 -->
                <div class="content-header">
                  <h2 class="content-title">精选二手电子产品</h2>
                  <div class="content-operate">
                    <button class="btn btn-primary">发布闲置</button>
                    <div class="sort-select">
                      <select name="sort" id="sort">
                        <option value="newest">按上架时间</option>
                        <option value="price-low">价格从低到高</option>
                        <option value="price-high">价格从高到低</option>
                        <option value="quality">成色优先</option>
                      </select>
                    </div>
                  </div>
                </div>

                <!-- 2. 二手商品分类筛选 -->
                <div class="content-filter">
                  <ul class="filter-list">
                    <li class="filter-item active"><a href="#">全部品类</a></li>
                    <li class="filter-item"><a href="#">手机</a></li>
                    <li class="filter-item"><a href="#">笔记本电脑</a></li>
                    <li class="filter-item"><a href="#">平板/手表</a></li>
                    <li class="filter-item"><a href="#">相机/镜头</a></li>
                    <li class="filter-item"><a href="#">耳机/音箱</a></li>
                    <li class="filter-item"><a href="#">游戏机</a></li>
                  </ul>
                  <div class="second-filter">
                    <div class="filter-group">
                      <span class="filter-label">成色：</span>
                      <ul class="filter-subList">
                        <li><a href="#" class="active">全部</a></li>
                        <li><a href="#">99新</a></li>
                        <li><a href="#">95新</a></li>
                        <li><a href="#">9新</a></li>
                        <li><a href="#">8新及以下</a></li>
                      </ul>
                    </div>
                    <div class="filter-group">
                      <span class="filter-label">价格：</span>
                      <ul class="filter-subList">
                        <li><a href="#" class="active">全部</a></li>
                        <li><a href="#">0-500元</a></li>
                        <li><a href="#">500-1500元</a></li>
                        <li><a href="#">1500-3000元</a></li>
                        <li><a href="#">3000元以上</a></li>
                      </ul>
                    </div>
                  </div>
                </div>

                <!-- 3. 核心：2行4列横排卡片（8张刚好分2行） -->
                <div class="content-card-list" onclick="window.location.href='productContent.html'">
                  <!-- 第一行第1张：iPhone 14 Pro -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">99新</span>
                      <img src="img/手机.jpeg" alt="iPhone 14 Pro">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">iPhone 14 Pro 256G 暗紫</a></h3>
                      <div class="card-params">
                        <span>电池92%</span>
                        <span>保修5个月</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥5299</span>
                        <span class="price-original">¥7999</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第2张：MacBook Air M2 -->
                  <div class="card-item" >
                    <div class="card-img">
                      <span class="tag-top">95新</span>
                      <img src="img/平板.jpeg" alt="MacBook Air M2">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">MacBook Air M2 256G</a></h3>
                      <div class="card-params">
                        <span>2023.08激活</span>
                        <span>原装充电器</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥6199</span>
                        <span class="price-original">¥8499</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第3张：iPad Pro 2021 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">9新</span>
                      <img src="img/电脑.jpeg" alt="iPad Pro 2021">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">iPad Pro 2021 256G 插卡</a></h3>
                      <div class="card-params">
                        <span>电池88%</span>
                        <span>面容正常</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥3499</span>
                        <span class="price-original">¥6299</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第4张：AirPods Pro 2 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">99新</span>
                      <img src="img/蓝牙.jpeg" alt="AirPods Pro 2">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">AirPods Pro 2 无线充</a></h3>
                      <div class="card-params">
                        <span>2024.01购</span>
                        <span>保修8个月</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥1399</span>
                        <span class="price-original">¥1899</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第二行第1张：索尼A6400相机 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">85新</span>
                      <img src="img/索尼A6400相机.jpeg" alt="索尼A6400">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">索尼A6400 单机 黑</a></h3>
                      <div class="card-params">
                        <span>快门1.2万</span>
                        <span>无拆修</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥3899</span>
                        <span class="price-original">¥5899</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第二行第2张：任天堂Switch OLED -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">95新</span>
                      <img src="img/任天堂.jpeg" alt="Switch OLED">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">Switch OLED 日版 白</a></h3>
                      <div class="card-params">
                        <span>未破解</span>
                        <span>原装底座</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥1999</span>
                        <span class="price-original">¥2599</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第二行第3张：华为Mate 50 Pro -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">95新</span>
                      <img src="img/华为Mate 50 Pro.jpeg" alt="华为Mate 50 Pro">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">华为Mate 50 Pro 256G</a></h3>
                      <div class="card-params">
                        <span>电池89%</span>
                        <span>昆仑玻璃</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥3699</span>
                        <span class="price-original">¥5499</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第二行第4张：小米手环8 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">99新</span>
                      <img src="img/小米手环8.jpeg" alt="小米手环8">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">小米手环8 黑色 未拆</a></h3>
                      <div class="card-params">
                        <span>2024.03产</span>
                        <span>全新未激活</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥199</span>
                        <span class="price-original">¥299</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">99新</span>
                      <img src="img/手机.jpeg" alt="iPhone 14 Pro">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">iPhone 14 Pro 256G 暗紫</a></h3>
                      <div class="card-params">
                        <span>电池92%</span>
                        <span>保修5个月</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥5299</span>
                        <span class="price-original">¥7999</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第2张：MacBook Air M2 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">95新</span>
                      <img src="img/平板.jpeg" alt="MacBook Air M2">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">MacBook Air M2 256G</a></h3>
                      <div class="card-params">
                        <span>2023.08激活</span>
                        <span>原装充电器</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥6199</span>
                        <span class="price-original">¥8499</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第3张：iPad Pro 2021 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">9新</span>
                      <img src="img/电脑.jpeg" alt="iPad Pro 2021">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">iPad Pro 2021 256G 插卡</a></h3>
                      <div class="card-params">
                        <span>电池88%</span>
                        <span>面容正常</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥3499</span>
                        <span class="price-original">¥6299</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第4张：AirPods Pro 2 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">99新</span>
                      <img src="img/蓝牙.jpeg" alt="AirPods Pro 2">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">AirPods Pro 2 无线充</a></h3>
                      <div class="card-params">
                        <span>2024.01购</span>
                        <span>保修8个月</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥1399</span>
                        <span class="price-original">¥1899</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">99新</span>
                      <img src="img/手机.jpeg" alt="iPhone 14 Pro">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">iPhone 14 Pro 256G 暗紫</a></h3>
                      <div class="card-params">
                        <span>电池92%</span>
                        <span>保修5个月</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥5299</span>
                        <span class="price-original">¥7999</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第2张：MacBook Air M2 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">95新</span>
                      <img src="img/平板.jpeg" alt="MacBook Air M2">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">MacBook Air M2 256G</a></h3>
                      <div class="card-params">
                        <span>2023.08激活</span>
                        <span>原装充电器</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥6199</span>
                        <span class="price-original">¥8499</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第3张：iPad Pro 2021 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">9新</span>
                      <img src="img/电脑.jpeg" alt="iPad Pro 2021">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">iPad Pro 2021 256G 插卡</a></h3>
                      <div class="card-params">
                        <span>电池88%</span>
                        <span>面容正常</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥3499</span>
                        <span class="price-original">¥6299</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                  <!-- 第一行第4张：AirPods Pro 2 -->
                  <div class="card-item">
                    <div class="card-img">
                      <span class="tag-top">99新</span>
                      <img src="img/蓝牙.jpeg" alt="AirPods Pro 2">
                    </div>
                    <div class="card-content">
                      <h3 class="card-title"><a href="#">AirPods Pro 2 无线充</a></h3>
                      <div class="card-params">
                        <span>2024.01购</span>
                        <span>保修8个月</span>
                      </div>
                      <div class="card-price">
                        <span class="price-now">¥1399</span>
                        <span class="price-original">¥1899</span>
                      </div>
                      <button class="btn btn-buy">立即咨询</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>

</html>
<script src="js/ersou.js"></script>
